<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:14px;font-weight: bold}
    .top-panel > .layui-card-header > h4{font-weight: bold}
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main layui-top-box">
        <!--签到信息-->
        <div class="layui-row layui-col-space10">

            <!--课程信息-->
            <div class="layui-col-md8">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">
                        <h4>课程信息</h4>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-md6" style="border-right:1px solid #eceff9;">
                                <h4>任课教师： <span id="teacherName">刘备</span></h4>
                                <h4>课程名称：<span id="courseName">软件工程</span></h4>
                            </div>
                            <div class="layui-col-md6">
                                <h4>教室地点： <span id="classroomLocation">第十教学楼301</span></h4>
                                <h4>签到时间： <span id="checkinDate">8:22-8:32</span></h4>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!--人数详情-->
            <div class="layui-col-md4">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">
                        <h4>人数详情</h4>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                                <span id="attend_total">30 / 32</span>
                            </div>
                            <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                实到 <a style="color: #bd3004" id="attendNum">30</a><br>
                                应到 <a style="color: #1aa094" id="totalNum">32</a><br>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>学生签到详情</legend>
        </fieldset>

        <table class="layui-hide" id="studentInfo" lay-filter="studentInfo"></table>

        <script type="text/html" id="studentToolBar">
        <!-- 这里同样支持 laytpl 语法，如： -->
        {{#  if(d.checkinStatus == 0){ }}
            <button class="layui-btn-xs layui-btn-primary layui-border-green" lay-event="supply"><i class="layui-icon layui-icon-praise"></i>补签</button>
        {{#  } }}
        </script>


    </div>
</div>

<script th:inline="none">

    layui.use(['table', 'jquery'], function(){

        var studentTable = layui.table,
            $ = layui.jquery;

        var checkinId = parent.checkinId;

        var eduTeacher = JSON.parse(sessionStorage.getItem("eduTeacher"));

        //获取签到信息
        showCheckinInfo();

        //绑定行工具事件
        studentTable.on('tool(studentInfo)', function (obj) {
            layer.confirm('确定要给'+name+'同学补签吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                //发送请求进行补签
                $.ajax({
                    url:'http://localhost/api/teacher/checkin/'+checkinId+'/student/'+obj.data.id,
                    headers: {"token": eduTeacher.token},
                    type: "post",
                    success:function (result) {
                        if (result.code === 0){
                            //成功后进行页面渲染
                            studentTable.length = 0;
                            showCheckinInfo();
                        }
                        //成功，失败后显示信息
                        layer.msg(result.msg)
                    }
                })
            });
        })

        function showCheckinInfo() {
            $.ajax({
                url: "http://localhost/api/teacher/checkin/"+checkinId,
                headers: {"token": eduTeacher.token},
                type:"get",
                success: function (result) {
                    $('#teacherName').html(result.data.teacher.name);
                    $('#courseName').html(result.data.course.name);
                    $('#classroomLocation').html(result.data.classroom.location);
                    $('#checkinDate').html(result.data.starttime + ' - ' + result.data.finishtime);
                    $('#totalNum').html(result.data.totalNum);
                    $('#attendNum').html(result.data.attendNum);
                    $('#attend_total').html(result.data.attendNum + ' / ' + result.data.totalNum);
                    //学生信息表格
                    studentTable.render({
                        elem: '#studentInfo',
                        data: result.data.studentList,
                        headers: {token: eduTeacher.token},
                        id: 'studentInfo',
                        cols:[[
                            {field: 'id', title: '学生学号', sort: true, align: "center"},
                            {field: 'name', title: '学生姓名', align: "center"},
                            {field: 'gender', title: '性别',sort: true, align: "center", templet: function (data) {
                                    if(data.gender === 0){
                                        return "<div>男</div>";
                                    }else if (data.gender === 1){
                                        return "<div>女</div>";
                                    }
                                }},
                            {field: 'checkinStatus', title: '签到状态',sort: true, align: "center", templet: function (data) {
                                    if (data.checkinStatus === 0){
                                        return "<div class='checkin-status'><span class=\"layui-badge layui-bg-red\">未签到</span></div>";
                                    }else if (data.checkinStatus === 1){
                                        return "<div class='checkin-status'><span class=\"layui-badge layui-bg-green\">已签到</span></div>";
                                    }
                                }},
                            {align: 'center', templet: "#studentToolBar"}
                        ]],
                        skin: 'line',
                    });
                },
                error: function (result) {}
            })
        }
    });
</script>
